<template>
  <div class="top">
    <div class="bg-white" style="min-height: 60px;">
        <el-header class="system-top border-bottom bg-white border-light-1">
            <div class="row h-100 justify-content-between">
                <div class="col-auto h-100 py-2 ">
                    <router-link to="/"> 
                        <img class="h-100" src="../common/img/logo.svg" alt="">
                    </router-link>
                </div>
                <div class="col-auto p-0" style="min-width: 270px;">
                    <div class="row pt-3 w-100  text-secondary font-weight-bold small justify-content-end">
                        <div class="col-auto p-0">
                            <el-avatar :size="30"
                                src="https://gejubusinessbucket.oss-cn-beijing.aliyuncs.com/gejubusinessbucket/2019-05-08/513c9783e004c20d1f4d93330e01af32.png">
                            </el-avatar>
                        </div>
                        <div class=" col-auto pt-2 px-2">
                            <!-- <span class=" mr-2 ">讲师</span>  -->
                            <el-popover placement="bottom" width="180" trigger="click">
                                <ul class="py-2 px-2">
                                    <li class="pb-3">
                                        <el-button type="text" class="p-0 text-dark" @click="editUser = true">
                                            <span class="iconfont lwuser_hollow text-secondary"></span> 用户信息
                                        </el-button>
                                    </li>
                                    <li>
                                        <el-button type="text" class="p-0 text-dark" @click="passwordEdit = true">
                                            <span class="iconfont lwkey text-secondary"></span> 修改登录密码
                                        </el-button>
                                    </li>
                                </ul>
                                <el-button type="text" class="p-0 text-dark" slot="reference">
                                    <span class="">喵喵老师 </span><span class="el-icon-caret-bottom mr-2"></span>
                                </el-button>
                            </el-popover>
                            <span>已登录</span>
                            <el-divider direction="vertical"></el-divider>
                            <router-link to="login/inputLogin">退出</router-link> </a>
                        </div>
                    </div>
                </div>
            </div>
        </el-header>
    </div>

    <!--修改用户信息-->
    <el-dialog title=" 修改用户信息 " :visible.sync=" editUser " width="480px">
        <MyEdit-box></MyEdit-box>
    </el-dialog>

    <!--修改密码-->
    <el-dialog title=" 修改密码 " :visible.sync=" passwordEdit " width="480px">
        <MyPasswordEdit-box></MyPasswordEdit-box>
    </el-dialog>
  </div>
</template>
<script>
    import MyEdit from 'components/myEdit'
    import MyPasswordEdit from 'components/myPasswordEdit'
    export default {
        name: "Top",
        components: {
            "MyEdit-box": MyEdit,
            "MyPasswordEdit-box": MyPasswordEdit,
        },
        data() {
            return {
                editUser: false, // 编辑用户信息对话框 
                passwordEdit: false, // 修改密码对话框 
            }
        },

    }
</script>
<style>

</style>